<a href='https://github.com/angular/angular.js/edit/v1.4.x/src/ng/compile.js?message=docs($compile.directive.Attributes)%3A%20describe%20your%20change...#L2691' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>



<a href='https://github.com/angular/angular.js/tree/v1.4.7/src/ng/compile.js#L2691' class='view-source pull-right btn btn-primary'>
  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
</a>


<header class="api-profile-header">
  <h1 class="api-profile-header-heading">$compile.directive.Attributes</h1>
  <ol class="api-profile-header-structure naked-list step-list">
    
    <li>
      - type in module <a href="api/ng">ng</a>
    </li>
  </ol>
</header>



<div class="api-profile-description">
  <p>A shared object between directive compile / linking functions which contains normalized DOM
element attributes. The values reflect current binding state <code>{{ }}</code>. The normalization is
needed since all of these are treated as equivalent in Angular:</p>
<pre><code>&lt;span ng:bind=&quot;a&quot; ng-bind=&quot;a&quot; data-ng-bind=&quot;a&quot; x-ng-bind=&quot;a&quot;&gt;
</code></pre>

</div>




<div>
  

    

  

  
<h2>Methods</h2>
<ul class="methods">
  <li id="$normalize">
    <h3><p><code>$normalize(name);</code></p>

</h3>
    <div><p>Converts an attribute name (e.g. dash/colon/underscore-delimited string, optionally prefixed with <code>x-</code> or
<code>data-</code>) to its normalized, camelCase form.</p>
<p>Also there is special case for Moz prefix starting with upper case letter.</p>
<p>For further information check out the guide on <a href="guide/directive#matching-directives">Matching Directives</a></p>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        name
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>Name to normalize</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    

  </li>
  
  <li id="$addClass">
    <h3><p><code>$addClass(classVal);</code></p>

</h3>
    <div><p>Adds the CSS class value specified by the classVal parameter to the element. If animations
are enabled then an animation will be triggered for the class addition.</p>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        classVal
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>The className value that will be added to the element</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    

  </li>
  
  <li id="$removeClass">
    <h3><p><code>$removeClass(classVal);</code></p>

</h3>
    <div><p>Removes the CSS class value specified by the classVal parameter from the element. If
animations are enabled then an animation will be triggered for the class removal.</p>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        classVal
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>The className value that will be removed from the element</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    

  </li>
  
  <li id="$updateClass">
    <h3><p><code>$updateClass(newClasses, oldClasses);</code></p>

</h3>
    <div><p>Adds and removes the appropriate CSS class values to the element based on the difference
between the new and old CSS class values (specified as newClasses and oldClasses).</p>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        newClasses
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>The current CSS className value</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        oldClasses
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>The former CSS className value</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    

  </li>
  
  <li id="$observe">
    <h3><p><code>$observe(key, fn);</code></p>

</h3>
    <div><p>Observes an interpolated attribute.</p>
<p>The observer function will be invoked once during the next <code>$digest</code> following
compilation. The observer is then invoked whenever the interpolated value
changes.</p>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        key
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>Normalized key. (ie ngAttribute) .</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        fn
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-function">function(interpolatedValue)</a>
      </td>
      <td>
        <p>Function that will be called whenever
                the interpolated value of the attribute changes.
       See the <a href="guide/directive#text-and-attribute-bindings">Directives</a> guide for more info.</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-function">function()</a></td>
    <td><p>Returns a deregistration function for this observer.</p>
</td>
  </tr>
</table>
    

  </li>
  
  <li id="$set">
    <h3><p><code>$set(name, value);</code></p>

</h3>
    <div><p>Set DOM element attribute value.</p>
</div>

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        name
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>Normalized element attribute name of the property to modify. The name is
         reverse-translated using the <a href="api/ng/type/$compile.directive.Attributes#$attr">$attr</a>
         property to the original name.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        value
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>Value to set the attribute to. The value can be an interpolated string.</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    
    
    

  </li>
  </ul>
  
  
<h2>Properties</h2>
<ul class="properties">
  <li id="$attr">
    <h3><code>$attr</code></h3>
    <table class="variables-matrix return-arguments">
  <tr>
    <td></td>
    <td><p>A map of DOM element attribute names to the normalized name. This is
needed to do reverse lookup from normalized name back to actual name.</p>
</td>
  </tr>
</table>
  </li>
  </ul>



  
</div>


